<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>待审核视频 - 局域网视频学习系统</title>
    <link rel="stylesheet" href="../css/common.css">
    <style>
        .page-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: var(--shadow);
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .page-title {
            font-size: 24px;
            font-weight: bold;
            color: var(--neutral-dark);
            margin: 0;
        }

        .pending-count {
            background: var(--warning-color);
            color: white;
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 500;
        }

        .filters-bar {
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: var(--shadow);
            margin-bottom: 20px;
        }

        .filters-row {
            display: flex;
            gap: 15px;
            align-items: center;
            flex-wrap: wrap;
        }

        .filter-group {
            display: flex;
            flex-direction: column;
            gap: 5px;
        }

        .filter-label {
            font-size: 12px;
            color: #666;
            font-weight: 500;
        }

        .videos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 20px;
        }

        .video-card {
            background: white;
            border-radius: 8px;
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: transform 0.3s ease;
            border-left: 4px solid var(--warning-color);
        }

        .video-card:hover {
            transform: translateY(-2px);
        }

        .video-thumbnail {
            width: 100%;
            height: 200px;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #999;
            font-size: 48px;
            position: relative;
        }

        .video-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .video-duration {
            position: absolute;
            bottom: 8px;
            right: 8px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 2px 6px;
            border-radius: 4px;
            font-size: 12px;
        }

        .video-info {
            padding: 16px;
        }

        .video-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
            color: var(--neutral-dark);
            line-height: 1.4;
        }

        .video-meta {
            font-size: 12px;
            color: #666;
            margin-bottom: 8px;
        }

        .video-tags {
            margin: 8px 0;
        }

        .tag {
            display: inline-block;
            background: rgba(255, 167, 38, 0.1);
            color: var(--warning-color);
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 11px;
            margin-right: 4px;
            margin-bottom: 4px;
        }

        .video-actions {
            display: flex;
            gap: 8px;
            margin-top: 12px;
        }

        .btn-sm {
            padding: 6px 12px;
            font-size: 12px;
            border-radius: 4px;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-approve {
            background: var(--success-color);
            color: white;
        }

        .btn-approve:hover {
            background: #1e7e34;
        }

        .btn-reject {
            background: var(--error-color);
            color: white;
        }

        .btn-reject:hover {
            background: #c82333;
        }

        .btn-preview {
            background: var(--primary-color);
            color: white;
        }

        .btn-preview:hover {
            background: #1e5f7a;
        }

        .video-stats {
            display: flex;
            gap: 16px;
            margin-top: 8px;
            font-size: 12px;
            color: #666;
        }

        .stat-item {
            display: flex;
            align-items: center;
            gap: 4px;
        }

        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #666;
            grid-column: 1 / -1;
        }

        .empty-state i {
            font-size: 64px;
            margin-bottom: 20px;
            color: #ccc;
        }

        .uploader-info {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
        }

        .uploader-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: var(--teacher-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
        }

        .uploader-name {
            font-size: 12px;
            color: #666;
        }

        .pending-badge {
            background: var(--warning-color);
            color: white;
            padding: 2px 6px;
            border-radius: 8px;
            font-size: 10px;
            font-weight: 500;
        }

        @media (max-width: 768px) {
            .filters-row {
                flex-direction: column;
                align-items: stretch;
            }
            
            .page-header {
                flex-direction: column;
                gap: 15px;
                align-items: stretch;
            }
            
            .videos-grid {
                grid-template-columns: 1fr;
            }
        }

        .sidebar-footer {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 20px;
            border-top: 1px solid var(--border-color);
        }

        .logout-btn {
            width: 100%;
            padding: 12px 16px;
            background: var(--error-color);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .logout-btn:hover {
            background: #c82333;
            transform: translateY(-1px);
        }

        /* 视频播放器弹窗样式 */
        .video-modal-content {
            display: flex;
            gap: 20px;
        }

        .video-player-section {
            flex: 2;
        }

        .video-info-section {
            flex: 1;
        }

        .video-player-container {
            width: 100%;
            background: #000;
            border-radius: 8px;
            overflow: hidden;
            position: relative;
            min-height: 300px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .video-player {
            width: 100%;
            height: auto;
            max-height: 400px;
        }

        .video-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #666;
            font-size: 16px;
        }

        .video-loading i {
            font-size: 32px;
            margin-bottom: 10px;
        }

        .video-error {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #666;
            text-align: center;
            padding: 20px;
        }

        .video-error i {
            font-size: 48px;
            margin-bottom: 15px;
            color: var(--error-color);
        }

        .video-error h3 {
            margin: 0 0 10px 0;
            color: #333;
        }

        .video-error p {
            margin: 0;
            color: #666;
        }

        .video-info-panel {
            background: #f8f9fa;
            border-radius: 8px;
            padding: 20px;
        }

        .video-info-details {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .info-item {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .info-item label {
            font-weight: 600;
            color: var(--neutral-dark);
            font-size: 14px;
        }

        .info-item span {
            color: #666;
            font-size: 14px;
        }

        @media (max-width: 768px) {
            .video-modal-content {
                flex-direction: column;
            }

            .video-player-container {
                min-height: 200px;
            }
        }
    </style>
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar">
        <div class="sidebar-header">
            <h3>管理员工作台</h3>
        </div>
        <ul class="sidebar-nav">
            <li class="nav-item">
                <a href="dashboard.html" class="nav-link">
                    <i>📊</i> 仪表盘
                </a>
            </li>
            <li class="nav-item">
                <a href="users.html" class="nav-link">
                    <i>👥</i> 用户管理
                </a>
            </li>
            <li class="nav-item">
                <a href="videos.html" class="nav-link">
                    <i>🎥</i> 视频管理
                </a>
            </li>
            <li class="nav-item">
                <a href="pending-videos.html" class="nav-link active">
                    <i>📹</i> 待审核视频
                </a>
            </li>
            <li class="nav-item">
                <a href="exam-management.html" class="nav-link">
                    <i>📝</i> 考试管理
                </a>
            </li>
            <li class="nav-item">
                <a href="profile.html" class="nav-link">
                    <i>👤</i> 个人资料
                </a>
            </li>
        </ul>
        
        <!-- 退出登录 -->
        <div class="sidebar-footer">
            <button class="logout-btn" onclick="UserManager.logout()">
                <i>🚪</i> 退出登录
            </button>
        </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
        <div class="content-wrapper">
            <!-- 页面标题 -->
            <div class="page-header">
                <h1 class="page-title">待审核视频</h1>
                <div class="pending-count" id="pendingCount">0 个待审核</div>
            </div>

            <!-- 筛选栏 -->
            <div class="filters-bar">
                <div class="filters-row">
                    <div class="filter-group">
                        <label class="filter-label">上传者</label>
                        <select id="uploaderFilter" class="form-control" style="width: 150px;">
                            <option value="">全部上传者</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label class="filter-label">上传时间</label>
                        <select id="timeFilter" class="form-control" style="width: 120px;">
                            <option value="">全部时间</option>
                            <option value="today">今天</option>
                            <option value="week">本周</option>
                            <option value="month">本月</option>
                        </select>
                    </div>
                    <div class="filter-group" style="flex: 1;">
                        <label class="filter-label">搜索视频</label>
                        <div class="search-box">
                            <input type="text" id="searchInput" class="form-control" placeholder="输入视频标题或标签搜索">
                            <i class="search-icon">🔍</i>
                        </div>
                    </div>
                    <div class="filter-group">
                        <label class="filter-label">&nbsp;</label>
                        <button class="btn btn-primary" onclick="applyFilters()">筛选</button>
                        <button class="btn btn-secondary" onclick="loadPendingVideos()" style="margin-left: 10px;">🔄 刷新</button>
                    </div>
                </div>
            </div>

            <!-- 视频网格 -->
            <div class="videos-grid" id="videosGrid">
                <!-- 视频卡片将在这里生成 -->
            </div>
        </div>
    </div>

    <!-- 侧边栏切换按钮 -->
    <button class="sidebar-toggle">☰</button>

    <script src="../js/common.js"></script>
    <script>
        let currentVideos = [];
        let filteredVideos = [];
        let currentVideo = null;

        // 页面初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 检查权限
            if (!UserManager.hasPermission(0)) {
                Message.error('权限不足');
                setTimeout(() => {
                    window.location.href = '../login.html';
                }, 2000);
                return;
            }

            // 加载待审核视频
            loadPendingVideos();
            
            // 绑定搜索事件
            document.getElementById('searchInput').addEventListener('input', 
                Utils.debounce(applyFilters, 300)
            );
            
            // 设置自动刷新（每30秒刷新一次）
            setInterval(() => {
                loadPendingVideos();
            }, 30000);
        });

        // 加载待审核视频
        async function loadPendingVideos() {
            try {
                // 显示加载状态
                const pendingCount = document.getElementById('pendingCount');
                const originalText = pendingCount.textContent;
                pendingCount.textContent = '加载中...';
                
                const response = await API.get('/video/pending');
                if (response.success) {
                    currentVideos = response.videos;
                    filteredVideos = [...currentVideos];
                    updatePendingCount();
                    renderVideos();
                    updateUploaderFilter();
                } else {
                    showEmptyState('加载待审核视频失败');
                    pendingCount.textContent = originalText;
                }
            } catch (error) {
                console.error('加载待审核视频失败:', error);
                showEmptyState('网络错误，请稍后重试');
                const pendingCount = document.getElementById('pendingCount');
                pendingCount.textContent = '加载失败';
            }
        }

        // 更新待审核数量
        function updatePendingCount() {
            const count = currentVideos.length;
            document.getElementById('pendingCount').textContent = `${count} 个待审核`;
        }

        // 更新上传者筛选器
        function updateUploaderFilter() {
            const uploaderFilter = document.getElementById('uploaderFilter');
            const uploaders = [...new Set(currentVideos.map(video => video.uploaderName))];
            
            uploaderFilter.innerHTML = '<option value="">全部上传者</option>';
            uploaders.forEach(uploader => {
                const option = document.createElement('option');
                option.value = uploader;
                option.textContent = uploader;
                uploaderFilter.appendChild(option);
            });
        }

        // 渲染视频
        function renderVideos() {
            const grid = document.getElementById('videosGrid');
            
            if (filteredVideos.length === 0) {
                grid.innerHTML = `
                    <div class="empty-state">
                        <i>📹</i>
                        <p>暂无待审核视频</p>
                        <small>所有视频都已审核完成</small>
                    </div>
                `;
                return;
            }
            
            grid.innerHTML = filteredVideos.map(video => `
                <div class="video-card">
                    <div class="video-thumbnail">
                        <i>🎬</i>
                        <div class="video-duration">${video.duration || '00:00'}</div>
                    </div>
                    <div class="video-info">
                        <div class="uploader-info">
                            <div class="uploader-avatar">👨‍🏫</div>
                            <span class="uploader-name">${video.uploaderName || '未知'}</span>
                            <span class="pending-badge">待审核</span>
                        </div>
                        <h3 class="video-title">${video.title}</h3>
                        <div class="video-meta">上传时间: ${Utils.formatTime(video.uploadTime)}</div>
                        ${video.intro ? `<p style="font-size: 12px; color: #666; margin: 8px 0;">${video.intro}</p>` : ''}
                        ${video.tags ? `
                            <div class="video-tags">
                                ${video.tags.split(',').map(tag => `<span class="tag">${tag.trim()}</span>`).join('')}
                            </div>
                        ` : ''}
                        <div class="video-actions">
                            <button class="btn-sm btn-preview" onclick="previewVideo(${video.id})">预览</button>
                            <button class="btn-sm btn-approve" onclick="approveVideo(${video.id})">通过</button>
                            <button class="btn-sm btn-reject" onclick="rejectVideo(${video.id})">拒绝</button>
                        </div>
                        <div class="video-stats">
                            <div class="stat-item">
                                <i>💾</i>
                                <span>${Utils.formatFileSize(video.size || 0)}</span>
                            </div>
                            <div class="stat-item">
                                <i>📅</i>
                                <span>${Utils.formatTime(video.uploadTime)}</span>
                            </div>
                        </div>
                    </div>
                </div>
            `).join('');
        }

        // 应用筛选
        function applyFilters() {
            const uploaderFilter = document.getElementById('uploaderFilter').value;
            const timeFilter = document.getElementById('timeFilter').value;
            const searchTerm = document.getElementById('searchInput').value.toLowerCase();
            
            filteredVideos = currentVideos.filter(video => {
                // 上传者筛选
                if (uploaderFilter && video.uploaderName !== uploaderFilter) {
                    return false;
                }
                
                // 时间筛选
                if (timeFilter) {
                    const uploadTime = new Date(video.uploadTime);
                    const now = new Date();
                    const diffTime = now - uploadTime;
                    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                    
                    if (timeFilter === 'today' && diffDays > 1) return false;
                    if (timeFilter === 'week' && diffDays > 7) return false;
                    if (timeFilter === 'month' && diffDays > 30) return false;
                }
                
                // 搜索筛选
                if (searchTerm) {
                    const searchFields = [video.title, video.intro, video.tags].filter(Boolean);
                    if (!searchFields.some(field => field.toLowerCase().includes(searchTerm))) {
                        return false;
                    }
                }
                
                return true;
            });
            
            renderVideos();
        }

        // 预览视频
        async function previewVideo(videoId) {
            const video = currentVideos.find(v => v.id === videoId);
            if (!video) {
                Message.error('视频不存在');
                return;
            }
            
            await showVideoModal(video);
        }

        // 显示视频弹窗
        async function showVideoModal(video) {
            const modal = document.getElementById('videoModal');
            const title = document.getElementById('videoModalTitle');
            const playerContainer = document.getElementById('videoPlayerContainer');
            const infoPanel = document.getElementById('videoInfoPanel');

            // 设置标题
            title.textContent = video.title;

            // 显示加载状态
            playerContainer.innerHTML = `
                <div class="video-loading">
                    <i>⏳</i>
                    <span>正在加载视频...</span>
                </div>
            `;

            // 显示弹窗
            modal.classList.add('show');

            try {
                // 直接使用视频流URL
                const streamUrl = `/api/video/stream/${video.id}`;
                
                // 创建视频播放器
                const videoElement = document.createElement('video');
                videoElement.className = 'video-player';
                videoElement.controls = true;
                videoElement.preload = 'metadata';
                videoElement.crossOrigin = 'anonymous';
                videoElement.playsInline = true;
                videoElement.muted = false;
                videoElement.autoplay = false;
                videoElement.src = streamUrl;
                
                // 视频加载事件
                videoElement.addEventListener('loadedmetadata', () => {
                    playerContainer.innerHTML = '';
                    playerContainer.appendChild(videoElement);
                });
                
                // 视频播放结束事件
                videoElement.addEventListener('ended', () => {
                    console.log('管理员端视频播放结束');
                    // 管理员端不需要记录学习进度，只需要记录观看
                });

                // 视频错误处理
                videoElement.addEventListener('error', (e) => {
                    console.error('视频播放错误:', e);
                    console.error('错误详情:', {
                        error: videoElement.error,
                        networkState: videoElement.networkState,
                        readyState: videoElement.readyState,
                        src: videoElement.src,
                        currentSrc: videoElement.currentSrc,
                        currentTime: videoElement.currentTime,
                        duration: videoElement.duration
                    });
                    
                    const error = videoElement.error;
                    let errorMessage = '视频播放失败';
                    let errorDetail = '请检查网络连接或联系管理员';
                    let showError = true;
                    
                    if (error) {
                        switch (error.code) {
                            case 1:
                                errorMessage = '视频加载被中止';
                                errorDetail = '网络连接中断或服务器响应超时';
                                break;
                            case 2:
                                errorMessage = '网络错误';
                                errorDetail = '无法连接到视频服务器';
                                break;
                            case 3:
                                errorMessage = '视频解码错误';
                                errorDetail = '视频格式不支持或文件损坏';
                                // 如果是播放结束后的解码错误，可能是正常的
                                if (videoElement.currentTime > 0 && videoElement.duration > 0 && 
                                    Math.abs(videoElement.currentTime - videoElement.duration) < 1) {
                                    console.log('检测到播放结束后的解码错误，可能是正常的');
                                    showError = false;
                                }
                                break;
                            case 4:
                                errorMessage = '视频格式不支持';
                                errorDetail = '浏览器不支持此视频格式';
                                break;
                            default:
                                errorMessage = '未知播放错误';
                                errorDetail = `错误代码: ${error.code}`;
                        }
                    }
                    
                    // 只有在需要显示错误的情况下才显示错误界面
                    if (showError) {
                        playerContainer.innerHTML = `
                            <div class="video-error">
                                <i>❌</i>
                                <h3>${errorMessage}</h3>
                                <p>${errorDetail}</p>
                                <div style="margin-top: 16px;">
                                    <button class="btn btn-primary" onclick="location.reload()">重新加载</button>
                                    <button class="btn btn-secondary" onclick="window.history.back()">返回</button>
                                </div>
                            </div>
                        `;
                    }
                });
            } catch (error) {
                console.error('获取视频流失败:', error);
                playerContainer.innerHTML = `
                    <div class="video-error">
                        <i>❌</i>
                        <h3>视频加载失败</h3>
                        <p>网络错误，无法连接到服务器</p>
                    </div>
                `;
            }

            // 设置视频信息面板
            infoPanel.innerHTML = `
                <div class="video-info-details">
                    <div class="info-item">
                        <label>上传者</label>
                        <span>${video.uploaderName || '未知'}</span>
                    </div>
                    <div class="info-item">
                        <label>上传时间</label>
                        <span>${Utils.formatTime(video.uploadTime)}</span>
                    </div>
                    <div class="info-item">
                        <label>文件大小</label>
                        <span>${Utils.formatFileSize(video.size || 0)}</span>
                    </div>
                    <div class="info-item">
                        <label>视频时长</label>
                        <span>${video.duration || '00:00'}</span>
                    </div>
                    <div class="info-item">
                        <label>状态</label>
                        <span style="color: var(--warning-color); font-weight: 600;">待审核</span>
                    </div>
                    ${video.intro ? `
                        <div class="info-item">
                            <label>视频描述</label>
                            <span>${video.intro}</span>
                        </div>
                    ` : ''}
                    ${video.tags ? `
                        <div class="info-item">
                            <label>标签</label>
                            <div style="margin-top: 4px;">
                                ${video.tags.split(',').map(tag => `<span class="tag">${tag.trim()}</span>`).join('')}
                            </div>
                        </div>
                    ` : ''}
                </div>
            `;
            
            // 设置当前视频
            currentVideo = video;
        }

        // 隐藏视频弹窗
        function hideVideoModal() {
            const modal = document.getElementById('videoModal');
            modal.classList.remove('show');
            
            // 清理视频播放器
            const playerContainer = document.getElementById('videoPlayerContainer');
            playerContainer.innerHTML = '';
            
            currentVideo = null;
        }

        // 从弹窗中审核通过视频
        async function approveVideoFromModal() {
            if (!currentVideo) return;
            
            try {
                const response = await API.post(`/video/${currentVideo.id}/approve`);
                if (response.success) {
                    Message.success('视频审核通过');
                    hideVideoModal();
                    loadPendingVideos(); // 重新加载待审核视频列表
                } else {
                    Message.error(response.message || '审核失败');
                }
            } catch (error) {
                console.error('审核视频失败:', error);
                Message.error('审核失败：' + error.message);
            }
        }

        // 从弹窗中审核拒绝视频
        async function rejectVideoFromModal() {
            if (!currentVideo) return;
            
            const reason = prompt('请输入拒绝原因（可选）：');
            if (reason === null) return; // 用户取消
            
            try {
                const response = await API.post(`/video/${currentVideo.id}/reject`, { 
                    reason: reason || '不符合要求' 
                });
                if (response.success) {
                    Message.success('视频已拒绝');
                    hideVideoModal();
                    loadPendingVideos(); // 重新加载待审核视频列表
                } else {
                    Message.error(response.message || '操作失败');
                }
            } catch (error) {
                console.error('拒绝视频失败:', error);
                Message.error('操作失败：' + error.message);
            }
        }

        // 审核通过
        function approveVideo(videoId) {
            const video = currentVideos.find(v => v.id === videoId);
            if (!video) return;
            
            Modal.confirm(`确认通过视频 "${video.title}" 的审核吗？`, async () => {
                try {
                    const response = await API.post(`/video/${videoId}/approve`);
                    if (response.success) {
                        Message.success('视频审核通过');
                        loadPendingVideos();
                    } else {
                        Message.error(response.message || '审核失败');
                    }
                } catch (error) {
                    console.error('审核视频失败:', error);
                    Message.error('审核失败：' + error.message);
                }
            });
        }

        // 审核拒绝
        function rejectVideo(videoId) {
            const video = currentVideos.find(v => v.id === videoId);
            if (!video) return;
            
            // 这里可以弹出一个输入框让管理员输入拒绝原因
            const reason = prompt('请输入拒绝原因：');
            if (reason === null) return; // 用户取消
            
            Modal.confirm(`确认拒绝视频 "${video.title}" 的审核吗？`, async () => {
                try {
                    const response = await API.post(`/video/${videoId}/reject`, {
                        reason: reason || '不符合要求'
                    });
                    if (response.success) {
                        Message.success('视频审核拒绝');
                        loadPendingVideos();
                    } else {
                        Message.error(response.message || '审核失败');
                    }
                } catch (error) {
                    console.error('审核视频失败:', error);
                    Message.error('审核失败：' + error.message);
                }
            });
        }

        // 显示空状态
        function showEmptyState(message) {
            const container = document.getElementById('videosGrid');
            container.innerHTML = `
                <div class="empty-state" style="grid-column: 1 / -1;">
                    <i>📹</i>
                    <p>${message}</p>
                </div>
            `;
        }
    </script>

    <!-- 视频详情模态框 -->
    <div class="modal" id="videoModal">
        <div class="modal-dialog" style="max-width: 1000px;">
            <div class="modal-header">
                <h5 class="modal-title" id="videoModalTitle">视频详情</h5>
                <button type="button" class="modal-close" onclick="hideVideoModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div class="video-modal-content">
                    <div class="video-player-section">
                        <div id="videoPlayerContainer" class="video-player-container">
                            <!-- 视频播放器将在这里生成 -->
                        </div>
                    </div>
                    <div class="video-info-section">
                        <div id="videoInfoPanel" class="video-info-panel">
                            <!-- 视频信息将在这里生成 -->
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="hideVideoModal()">关闭</button>
                <button type="button" class="btn btn-success" id="approveBtn" onclick="approveVideoFromModal()">审核通过</button>
                <button type="button" class="btn btn-danger" id="rejectBtn" onclick="rejectVideoFromModal()">审核拒绝</button>
            </div>
        </div>
    </div>
</body>
</html>
